<template>
  <div class="login">
    <!-- 登陆面板内容 -->
    <div class="loginInner">
      <!-- 面板头部 -->
      <div class="loginHeader">
        <div class="loginLogo">
          <img src="./../login/images/lk_logo_sm.png" width="300px" />
        </div>

        <!-- 面板标题 -->
        <div class="loginHeaderTitle">
          <a href="javascript:;" :class="{current:loginMode}" @click="dealLoginMode(true)">手机登陆</a>
          <a href="javascript:;" :class="{current:!loginMode}" @click="dealLoginMode(false)">密码登录</a>
        </div>
      </div>
      <!-- 面板表单内容 -->
      <div class="loginContent">
        <form>
          <!-- 手机验证码登陆部分 -->
          <div :class="{current:loginMode}">
            <section class="loginMessage">
              <input type="number" placeholder="请输入手机号码" v-model="phone" />
              <button
                v-if="!countDown"
                class="getVerIfIcation"
                :class="{phone_right:phoneRight}"
                @click.prevent="getVerifyCode()"
              >获取验证码</button>
              <button v-else class="getVerIfIcation">已发送({{countDown}}s)</button>
            </section>
            <section class="loginVerIfIcation">
              <input type="number" maxlength="6" placeholder="验证码" v-model="code" />
            </section>
            <section class="loginHint">
              温馨提示 : 未注册账号手机 , 登录后将自动注册 , 且代表同意
              <a href="javascript:;">服务协议与隐私政策</a>
            </section>
          </div>
          <!-- 账号密码登录部分 -->
          <div :class="{current:!loginMode}">
            <section class="loginMessage">
              <input type="tel" placeholder="用户名" maxlength="11" v-model="user_name" />
            </section>
            <section class="loginVerIfIcation">
              <input
                v-if="pwdMode"
                type="password"
                placeholder="密码"
                maxlength="20"
                autocomplete="off"
                v-model="pwd"
              />
              <input
                v-else
                type="text"
                placeholder="密码"
                maxlength="20"
                autocomplete="off"
                v-model="pwd"
              />
              <div class="switchShow current">
                <img
                  src="./images/hide_pwd.png"
                  @click.prevent="dealPwdMode(false)"
                  width="20px"
                  :class="{on:pwdMode}"
                />
                <img
                  src="./images/show_pwd.png"
                  width="20px"
                  @click.prevent="dealPwdMode(true)"
                  :class="{on:!pwdMode}"
                />
              </div>
            </section>
            <section class="loginMessage">
              <input type="text" maxlength="4" placeholder="验证码" v-model="captcha" />
              <img
                class="getVerIfIcation"
                src="http://demo.itlike.com/web/xlmc/api/captcha"
                width="120px"
                alt="captcha"
                @click.prevent="getCaptcha"
                ref="captcha"
              />
            </section>
          </div>
          <button class="loginSubmit" @click.prevent="login">登录</button>
        </form>
        <button class="loginBack" @click.prevent="$router.back()">返回</button>
      </div>
    </div>
  </div>
</template>


<script>
import { getPhoneCode, phoneCodeLogin, pwdLogin } from "./../../service/api/index";
// import { mapMutations } from "vuex";
import { mapActions } from "vuex";
import { Toast } from "vant";

export default {
  name: "login",

  data() {
    return {
      loginMode: true, //登录模式
      phone: null, // 手机号
      countDown: 0, //倒计时
      code: null, // 手机验证码
      userInfo: null, //接收用户信息

      user_name: null, //用户名
      pwd: null, //密码
      pwdMode: true, //密码显示模式  true密文 false明文
      captcha: null //图形验证码
    };
  },
  computed: {
    //验证手机号码是否正确
    phoneRight() {
      return /^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone); // /^ 开头  [1]第一个数 [3,4,5,]第二个数, [0-9]剩余数字0-9之间的数,{9} 剩余长度  $/ 结尾
    }
  },
  methods: {
    ...mapActions(["syncUserInfo"]),
    // 1.登录模式选择
    dealLoginMode(flag) {
      this.loginMode = flag;
    },
    // 2.获取短信验证码
    async getVerifyCode() {
      // 2.1过滤获取短信亮起才能点击
      if (this.phoneRight) {
        this.countDown = 5;
        // 2.2 倒计时
        this.intervalId = setInterval(() => {
          this.countDown--;
          if (this.countDown === 0) {
            clearInterval(this.intervalId);
          }
        }, 1000);

        // 2.3 获取短信验证码
        let result = await getPhoneCode(this.phone);
        console.log(result);
      }
    },
    // 3.登录
    async login() {
      // 3.1 判断登录模式
      if (this.loginMode) {
        //手机验证码登录

        // 3.3.1 输入数据校验
        if (!this.phone) {
          // 非Phone为空数据  .
          Toast({
            message: "请输入有效手机号码",
            duration: 500 // 500毫秒
          });
          return;
        } else if (!this.phoneRight) {
          Toast({
            message: "手机号码不正确",
            duration: 500 // 500毫秒
          });
          return;
        }

        if (!this.code) {
          Toast({
            message: "请输入有效验证码",
            duration: 500 // 500毫秒
          });
          return;
        } else if (!/^\d{6}$/gi.test(this.code)) {
          // \d 数字 gi全局
          Toast({
            message: "请输入正确验证码",
            duration: 500 // 500毫秒
          });
          return;
        }

        // 3.1.2 手机验证码登录

        let result = await phoneCodeLogin(this.phone, this.code);
        if (result.success_code === 200) {
          //  4.1 保存用户信息
          this.syncUserInfo(result.data);
          // 4.1 回到主面板
          this.$router.back();
        } else {
          //失败
          this.userInfo = {
            message: "登录失败, 手机号码或验证码不正确!"
          };
        }
      } else {
        // 3.2用户名密码登录
        if (!this.user_name) {
          Toast({
            message: "请输入用户名",
            duration: 500
          });
          return;
        } else if (!this.pwd) {
          Toast({
            message: "请输入密码",
            duration: 500
          });
          return;
        } else if (!this.captcha) {
          Toast({
            message: "请输入验证码",
            duration: 500
          });
          return;
        }
        //3.2.1 发起请求
        let result = await pwdLogin(this.user_name, this.pwd, this.captcha);
        console.log(result);
        
          // if(result.success_code === 200){
          //   // 4.1 保存用户信息
          //   this.syncUserInfo(result.data);
          //   //4.2 回到主界面
          //   this.$router.back();
          // }
        
        
      }
    },
    //4. 处理密码显示
    dealPwdMode(flag) {
      this.pwdMode = flag;
    },

    //5. 获取随机图形验证码
    getCaptcha() {
      //1. 获取验证码的标签
      let captchaEla = this.$refs.captcha;
      //2. 设置到对象上 captchaEla 的 src 避免服务器误认为是同样的请求发送304, 要加个时间戳,独一无二
      this.$set(
        captchaEla,
        "src",
        "http://demo.itlike.com/web/xlmc/api/captcha?time" + new Date()
      );
    }
  }
};
</script>


<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;

  .loginInner {
    width: 80%;
    // height: 100%;
    padding-top: 60px;
    margin: 0 auto;
    // background-color: red;

    .loginHeader {
      .loginLogo {
        margin-top: 20px;
        font-weight: bold;
        color: #75a342;
        text-align: center;
      }

      .loginHeaderTitle {
        padding-top: 40px;
        padding-bottom: 10px;
        text-align: center;

        a {
          color: #333;
          font-size: 14px;
          padding-bottom: 4px;
        }

        a:first-child {
          margin-right: 40px;
        }

        a.current {
          color: #75a342;
          font-weight: 700;
          border-bottom: 2px solid #75a342;
        }
      }
    }
  }

  .loginContent {
    input {
      width: 100%;
      height: 100%;
      padding-left: 8px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline: 0;
      font: 400 14px Arial;
      background-color: #f5f5f5;
    }

    div {
      display: none;
    }
    .current {
      display: block;
    }

    .loginMessage,
    .loginVerIfIcation {
      position: relative;
      margin-top: 16px;
      height: 48px;
      font-size: 14px;

      .getVerIfIcation {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        color: #ccc;
        border: 0;
        font-size: 14px;
        background: transparent;
      }

      .phone_right {
        color: #75a342;
      }

      .switchShow {
        position: absolute;
        right: 15px;
        top: 14px;

        img {
          display: none;
        }

        img.on {
          display: block;
        }
      }
    }

    .loginHint {
      margin-top: 12px;
      color: 999;
      font-size: 12px;
      line-height: 20px;
    }

    .loginSubmit {
      width: 100%;
      height: 42px;
      margin-top: 30px;
      border-radius: 4px;
      background-color: #75a342;
      color: #fff;
      text-align: center;
      font-size: 18px;
      line-height: 42px;
      border: 0;
    }
    .loginBack {
      width: 100%;
      height: 42px;
      margin-top: 30px;
      border-radius: 4px;
      background-color: #fff;
      color: #75a342;
      text-align: center;
      font-size: 18px;
      line-height: 42px;
      border: 1px solid #75a342;
    }
  }
}
</style>